<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="./css/index.css">
	<link rel="stylesheet" href="./lib/bootstrap.min.css">
</head>
<body data-spy="scroll" data-target="#navbar-example">
<div class="banner">
	<ul>
		<li class="bannerBody">
			<img src="./images/banner4.jpg" alt="">
			<div class="caption">
				<h1>亮点 眼镜</h1>
				<span>优雅、浪漫、艺术</span>
			</div>
		</li>
		<li class="bannerBody">
			<img src="./images/banner3.jpg" alt="">
			<div class="caption">
				<h1>亮点 眼镜</h1>
				<span>优雅、浪漫、艺术</span>
			</div>
		</li>
		<li class="bannerBody">
			<img src="./images/banner2.jpg" alt="">
			<div class="caption">
				<h1>亮点 眼镜</h1>
				<span>优雅、浪漫、艺术</span>
			</div>
		</li>
		<li class="bannerBody">
			<img src="./images/banner1.jpg" alt="">
			<div class="caption">
				<h1>亮点 眼镜</h1>
				<span>优雅、浪漫、艺术</span>
			</div>
		</li>
	</ul>
	<div class="btnLeft btn"><</div>
	<div class="btnRight btn">></div>
</div>
<div class="nav">
	<ul>
		<li>
			<div class="liMove">
				<div class="white">首页</div>
				<div class="blue">首页</div>
			</div>
		</li>
		<li>
			<div class="liMove">
				<div class="white">服务</div>
				<div class="blue">服务</div>
			</div>
		</li>
		<li>
			<div class="liMove">
				<div class="white">菜单</div>
				<div class="blue">菜单</div>
			</div>
		</li>
		<li>
			<div class="liMove">
				<div class="white">新闻</div>
				<div class="blue">新闻</div>
			</div>
		</li>
		<li>
			<div class="liMove">
				<div class="white">品尝</div>
				<div class="blue">品尝</div>
			</div>
		</li>
		<li>
			<div class="liMove">
				<div class="white">关于我们</div>
				<div class="blue">关于我们</div>
			</div>
		</li>
		<li>
			<div class="liMove">
				<div class="white">联系我们</div>
				<div class="blue">联系我们</div>
			</div>
		</li>
		<li>
			<div class="liMove">
				<div class="white">登录/注册</div>
				<div class="blue">登录/注册</div>
			</div>
		</li>
	</ul>
</div>
<div class="article">
	<div class="articleBox">
		<h1>亮点眼睛</h1>
		<p>
			隶属雅瑞光学有限公司。亮点眼镜，时尚前
			沿的经典，在创新中始终保持至臻优雅的风
			格品味，彰显夺目迷人的气质与个性魅力；
			亮点眼镜始终是优雅、浪漫、艺术的完美演绎。
		</p>
		<span>了解更多</span>
	</div>
</div>
<div class="medi">
	<div class="mediaIntroduce">
		<div class="mediaImg"></div>
		<p>
			于极致匠心体现优雅情怀，以至臻设计彰
			显浪漫风情，以精致细节传递艺术之魂
			产品设计理念
		</p>
	</div>
	<div class="video"></div>
	<video src="" autoplay="autoplay" loop="loop" controls="controls"></video>
</div>
<div class="product">
	<div class="productBox">
		<span>商品系列</span>
		<div>
			<div class="menu">
				<div class="menuImg"></div>
				<div class="wordMenu">
					<h3>男士眼镜</h3>
					<p>想要瞬间来个造型气质大转变，只需简简单单
						一副边框眼镜，帅哥们快用边框眼镜把自己变得
						更帅，把你帅气搞怪的一面展现出来
					</p>
				</div>
			</div>
			<div class="menu">
				<div class="menuImg"></div>
				<div class="wordMenu">
					<h3>男士眼镜</h3>
					<p>想要瞬间来个造型气质大转变，只需简简单单
						一副边框眼镜，帅哥们快用边框眼镜把自己变得
						更帅，把你帅气搞怪的一面展现出来
					</p>
				</div>
			</div>
			<div class="menu">
				<div class="menuImg"></div>
				<div class="wordMenu">
					<h3>男士眼镜</h3>
					<p>想要瞬间来个造型气质大转变，只需简简单单
						一副边框眼镜，帅哥们快用边框眼镜把自己变得
						更帅，把你帅气搞怪的一面展现出来
					</p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="styleRecommend">
	<div class="span">新款推荐</div>
	<div class="recommendBox">
		<div class=" col-md-3">
			<img src="./images/runway1_m.jpg" alt="">
			<div class="price">
				<h1>$534.99</h1>
				<p>枪框灰片 经典潮流.</p>
			</div>
		</div>
		<div class=" col-md-3">
			<img src="./images/runway2_m.jpg" alt="">
			<div class="price">
				<h1>$534.99</h1>
				<p>枪框灰片 经典潮流.</p>
			</div>
		</div>
		<div class=" col-md-3">
			<img src="./images/runway3_m.jpg" alt="">
			<div class="price">
				<h1>$534.99</h1>
				<p>枪框灰片 经典潮流.</p>
			</div>
		</div>
		<div class=" col-md-3">
			<img src="./images/runway4_m.jpg" alt="">
			<div class="price">
				<h1>$534.99</h1>
				<p>枪框灰片 经典潮流.</p>
			</div>
		</div>
	</div>
</div>
<div class="service">
	<img src="./images/banner41.jpg" alt="">
	<div class="coverBed">
		<div class="content">
			<div class="tableTd">
				<h3>服务支持</h3>
				<div class="serviceBox">
					<div class="menu">
						<div class="menuImg"></div>
						<div class="menuWord">
							<h4>预约服务</h4>
							<p>
								如果您需要定制您心爱的个性眼镜，
								请留下您的相关信息，我们将在两天内与您联系。
							</p>
						</div>
					</div>
					<div class="menu">
						<div class="menuImg"></div>
						<div class="menuWord">
							<h4>预约服务</h4>
							<p>
								如果您需要定制您心爱的个性眼镜，
								请留下您的相关信息，我们将在两天内与您联系。
							</p>
						</div>
					</div>
				</div>
				<div class="more">浏览更多</div>
			</div>

		</div>
	</div>
</div>
<div class="story">
	<div class="storyBox">
		<span>我们的故事</span>
		<div class="companyProfile">
			<div class="profileImg">
				<img src="./images/about1.jpg" alt="">
			</div>
			<div class="profileWord">
				<span>公司简介</span>
				<p>杭州九景科技有限公司坐落于杭州东部新城核心地区——东方电子商务园，
					是一家集生产研发、造型设计、自主销售太阳镜、老花镜、防辐射眼
					镜及眼镜相关为一体的综合型企业。 九景凭借着多年的对外贸易和
					市场营销经验，不改“为国人眼睛尽心尽力”的初衷， 为国人提供最
					优质眼镜服务的信念， 历经十余载诚信经营和市场的不断检验。
				</p>
			</div>
		</div>
		<div class="brandDescribe ">
			<div class="profileWord">
				<span>品牌概述</span>
				<p>
					潮流经典 别具一格 个性但不张扬，是我们偏光太阳镜的风格。
					汇集全球顶尖流行趋势，结合东方人特有的脸型特点与审美潮流，
					用敏锐的洞察力对每一季的流行元素进行创新，展现出独有的风格
					魅力和时尚创造力。 让墨镜不单单能阻挡紫外线，为始终站在时
					尚前沿的你提供最搭配。 年轻?潮流?没那么复杂
				</p>
			</div>
			<div class="profileImg">
				<img src="./images/about2.jpg" alt="">
			</div>
		</div>
		<div class="founderAspiration">
			<div class="profileImg">
				<img src="./images/about3.jpg" alt="">
			</div>
			<div class="profileWord">
				<span>创始人心声</span>
				<p>杭州九景科技有限公司坐落于杭州东部新城核心地区——东方电子商务园，
					是一家集生产研发、造型设计、自主销售太阳镜、老花镜、防辐射眼
					镜及眼镜相关为一体的综合型企业。 九景凭借着多年的对外贸易和
					市场营销经验，不改“为国人眼睛尽心尽力”的初衷， 为国人提供最
					优质眼镜服务的信念， 历经十余载诚信经营和市场的不断检验。
				</p>
			</div>
		</div>
	</div>
</div>
<div class="connectUs">
	<div class="connectBox">
		<div class="iptBox">
			<span>联系我们</span>
			<input type="text" placeholder="姓名">
			<input type="text" placeholder="邮箱">
			<input type="text" placeholder="电话">
			<input id="Message" type="text" placeholder="留言">
			<div class="message">发送信息</div>
		</div>
	</div>
</div>
<div class="footer">
	<div class="footerImg"></div>
	<p>Copyright © 2015.Company name All rights reserved.</p>
</div>
</body>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript" src="./lib/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</html>